<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>检测结果录入</title>
    <script src="js/jquery-3.6.0.js" type="text/javascript"></script>
    <script src="bootstrap/js/bootstrap.js" type="text/javascript"></script>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <script src="layui/layui.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script th:src="@{js/vue.js}"></script>
    <script th:src="@{js/vue-axios.js}"></script>
    <link rel="stylesheet" href="css/resultEntry.css">
    <script type="text/javascript" src="js/dateFormat.js"></script>
</head>
<body>
    <div id="resultEntry">
        <ol class="breadcrumb">
            <li><a href="/mainbg">主页</a></li>
            <li><a href="#">核酸检测</a></li>
            <li><a href="#">用户信息</a></li>
        </ol>
        <div class="panel panel-success">
            <div class="panel-heading">检测结果</div>
            <div class="panel-body">
                <form id="formId" class="form-inline" action="">
                    <div class="form-group">
                        <label for="nameId">姓名</label>
                        <input style="width: 169px;" type="text" name="name" class="form-control" id="nameId" placeholder="请输入姓名">
                    </div>
                    <div class="form-group">
                        <label for="timeId">检测时间</label>
                        <input type="text" name="time" class="form-control" id="timeId" placeholder="yyyy-MM-dd HH:mm:ss">
                    </div>
                    <div class="form-group">
                        <label for="resultId">检测结果</label>
                        <select  id="resultId" name="result" class="form-control" style="width: 169px;">
                            <option value="2">全部</option>
                            <option value="0">阴性</option>
                            <option value="1">阳性</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="detectionId2">检测机构</label>
                        <select id="detectionId2" name="detectionid" class="form-control" style="width: 169px;">
                            <option value="0">全部</option>
                            <option v-for="detectionPoints in detectionPointList" :key="detectionPoints.detectionid" :value="detectionPoints.detectionid">{{detectionPoints.detectionid}}.{{detectionPoints.name}}</option>
                        </select>
                    </div>
                    <button type="button" @click="inputSearch()" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span>查询</button>
                </form>
            </div>

            <table class="table table-bordered table-striped table-hover" style="margin-top: 10px">
                <thead>
                <tr class="info">
                    <th>姓名</th>
                    <th>性别</th>
                    <th>电话号码</th>
                    <th>身份证号</th>
                    <th>检测开始时间</th>
                    <th>结果录入时间</th>
                    <th>检测结果</th>
                    <th>检测机构</th>
                    <th>结果录入</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="nucleicTestResult in nucleicTestList" :key="nucleicTestResult.id">
                    <td>{{nucleicTestResult.user.name}}</td>
                    <td>{{nucleicTestResult.user.sex}}</td>
                    <td>{{nucleicTestResult.user.tel}}</td>
                    <td>{{nucleicTestResult.user.idcard}}</td>
                    <td>{{nucleicTestResult.time|dateFormat}}</td>
                    <td>
                        <span v-if="nucleicTestResult.endtime==null">待录入</span>
                        <span v-if="nucleicTestResult.endtime!=null">{{nucleicTestResult.endtime|dateFormat}}</span>
                    </td>
                    <td>
                        <div v-if="nucleicTestResult.result==null" class="payDiv" style="background-color: #c7ddef">待录入</div>
                        <div v-if="nucleicTestResult.result==0" class="payDiv" style="background-color: #5FB878">阴性</div>
                        <div v-if="nucleicTestResult.result==1" class="payDiv" style="background-color: #FF5722">阳性</div>
                    </td>
                    <td>
                        <span v-if="nucleicTestResult.detectionPoint!=null">
                            {{nucleicTestResult.detectionPoint.name}}
                        </span>
                            <span v-if="nucleicTestResult.detectionPoint==null">
                            待录入
                        </span>
                    </td>
                    <td>
                        <div v-if="nucleicTestResult.result!=null" class="payDiv" style="background-color: #5cb85c">已录入</div>
                        <button v-if="nucleicTestResult.result==null" type="button" class="btn btn-warning btn-sm" @click="entryResultView(nucleicTestResult)" data-toggle="modal" data-target="#resultEntryModal">
                            <span class="glyphicon glyphicon-cog">录入</span></button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="modal fade" id="resultEntryModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">检测结果录入</h4>
                    </div>
                    <form id="inputResultForm">
                        <input type="hidden" name="resultId" :value="resultId">
                        <input type="hidden" name="userid" :value="userid">
                        <div id="formCss" class="modal-body">
                            <div class="form-group form-inline">
                                <label for="detectionId">医院名称:</label>
                                <select id="detectionId" name="detectionid" class="form-control" style="width: 192px;">
                                    <option v-for="detectionPoints in detectionPointList" :key="detectionPoints.detectionid" :value="detectionPoints.detectionid">{{detectionPoints.detectionid}}.{{detectionPoints.name}}</option>
                                </select>
                            </div>
                            <div class="form-group form-inline">
                                <label>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:</label>
                                <input  type="text" name="name" :value="name" disabled readonly class="form-control" >
                            </div>
                            <div class="form-group form-inline">
                                <label>电话号码:</label>
                                <input  type="text" name="tel" :value="tel" disabled readonly class="form-control" >
                            </div>
                            <div class="form-group form-inline">
                                <label>身份证号:</label>
                                <input  type="text" name="idcard" :value="idcard" disabled readonly class="form-control" >
                            </div>
                            <div class="form-group form-inline">
                                <label>检测时间:</label>
                                <input  type="text" name="startTime" :value="startTime|dateFormat" disabled readonly class="form-control" >
                            </div>
                            <div class="form-group form-inline">
                                <label for="detectionId">检测结果:</label>
                                <select name="result" class="form-control" style="width: 192px;">
                                    <option value="0">阴性</option>
                                    <option value="1">阳性</option>
                                </select>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-warning" data-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-success" data-dismiss="modal" @click="entryResultById()">保存录入结果</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        </div>

    <script>
        layui.use('laydate', function(){
            var laydate = layui.laydate;

            //日期时间选择器
            laydate.render({
                elem: '#timeId'
                ,type: 'datetime'
            });
        });
    </script>
    <script type="text/javascript">
        var vm=new Vue({
            el: "#resultEntry",
            data: {
                resultId: "",
                userid: "",
                detectionId: "",
                detailedAddress: "",
                name:"",
                tel: "",
                idcard: "",
                startTime:"",
                endTime:"",
                nucleicTestResult: {},
                nucleicTestList:[ ],
                detectionPointList: [ ]
            },
            methods: {
                findAllNucleicTest: function () {   //查询所有核酸检测结果
                    axios.get('/findAllNucleicTestResult')
                        .then(response => {
                            if (response.status == 200) {
                                this.nucleicTestList = response.data.nucleicTestList;
                            }
                        });
                },
                findAllDetectionPoint: function (nucleicTestResult) {
                    axios.get('/findAlldetectionPointajax')
                        .then(response => {
                            if (response.status == 200) {
                                this.detectionPointList = response.data;
                            }
                        });
                }
                ,
                inputSearch:function () {
                    let formText=$('#formId').serialize();
                    axios.get('/findAllNucleicTestResult?'+formText)
                        .then(response => {
                            if (response.status == 200) {
                                this.nucleicTestList = response.data.nucleicTestList;
                            }
                        });
                }
                ,
                entryResultView:function (nucleicTestResult) {
                    this.resultId=nucleicTestResult.id;
                    this.userid=nucleicTestResult.userid;
                    this.name=nucleicTestResult.user.name;
                    this.tel=nucleicTestResult.user.tel;
                    this.idcard=nucleicTestResult.user.idcard;
                    this.startTime=nucleicTestResult.time;
                }
                ,
                entryResultById:function () {
                    let rs=$('#inputResultForm').serialize();
                    axios.get('/entryResult?'+rs)
                        .then(response => {
                            if (response.status == 200) {
                                if(response.data=='SUCCESS'){
                                    layer.alert('录入成功',{icon:1});
                                    setTimeout(function () {
                                        vm.findAllNucleicTest();
                                    },1500)
                                }else{
                                    layer.alert('录入失败',{icon:2});
                                }
                            }
                    });
                }
            },
            created:function(){
                this.findAllNucleicTest();
                this.findAllDetectionPoint();
            }
        });
    </script>
</body>
</html>